<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      type="card"
    >
      <el-tab-pane
        label="功能权限"
        name="feature"
      >
        <el-form
          :rules="rules"
          style="max-width: 500px"
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-form-item
            label="角色名称:"
            prop="roleName"
          >
            <el-input
              placeholder="请输入角色名称"
              v-model="form.roleName"
              size="small"
            />
          </el-form-item>
          <el-form-item
            label="角色状态:"
            style="margin-top: 20px"
          >
            <el-radio
              v-model="form.status"
              :label="1"
            >
              启用
            </el-radio>
            <el-radio
              v-model="form.status"
              :label="0"
            >
              禁用
            </el-radio>
          </el-form-item>
          <el-form-item
            label="功能权限:"
            style="margin-top: 20px"
          >
            <el-tree
              ref="tree"
              default-expand-all
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-checked-keys="form.checkedKeys"
              :props="defaultProps"
            >
            </el-tree>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div style="padding: 50px 0;text-align: center;max-width: 500px">
      <el-button
        size="small"
        type="primary"
        @click="save"
        v-if="$accessCheck($Access.ROLE_EDIT)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RoleDetail',
    data () {
      return {
        activeName: 'feature',
        show: false,
        form: {
          roleName: '',
          status: 1,
          checkedKeys: []
        },
        rules: {
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ]
        },
        defaultProps: {
          children: 'children',
          label: 'nodeName'
        },
        treeData: []
      }
    },
    async created () {
      await this.getNodeList()
      if (this.$route.params.id) {
        this.getDetail(this.$route.params.id)
      }
    },
    methods: {
      save () {
        this.$refs.form.validate(async valid => {
          if (valid) {
            const nodePath = this.$refs.tree.getCheckedNodes().map(item => item.id).join(',')
            const params = {
              ...this.form,
              nodePath
            }
            if (this.$route.params.id) {
              await this.$service.gzl.updateRole(this.$route.params.id, params)
              this.$message.success('角色更新成功')
            } else {
              await this.$service.gzl.addRole(params)
              this.$message.success('角色新增成功')
            }
            this.$closeCurrentGoEdit('/base/role')
          }
        })
      },
      async getNodeList () {
        const { data } = await this.$service.gzl.queryNodeList()
        this.treeData = data.data
      },
      async getDetail (id) {
        const { data } = await this.$service.gzl.roleDetail(id)
        this.form.roleName = data.data.roleName
        this.form.status = data.data.status
        this.form.checkedKeys = data.data.nodePath.split(',')
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 10px;
  }
</style>
